<template>
  <div>
    <el-table v-loading="loading" :data="physicalList">
      <el-table-column label="物流ID" align="center" prop="physicalId" />
      <el-table-column label="物流单号" align="center" prop="physicalNum" />
      <el-table-column label="司机" align="center" prop="name" />
      <el-table-column label="运输状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0">未运输</el-tag>
          <el-tag v-if="scope.row.status == 1">运输中</el-tag>
          <el-tag v-if="scope.row.status == 2">运输完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="批次" align="center" prop="batchNum" />
      <el-table-column label="仓库名称" align="center" prop="warehouseName" />
      <el-table-column label="运输开始时间" align="center" prop="startTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="运输完成时间" align="center" prop="endTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button v-if="scope.row.status == 0" @click="yunshu(scope.row.physicalId)" type="text" size="small">接受</el-button>
          <el-button v-if="scope.row.status == 1" @click="wancheng(scope.row.physicalId)" type="text" size="small">结束</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!--添加或修改-->
    <el-dialog title="详情" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="物流ID">
              <el-input v-model="form.physicalId" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物流编号">
              <el-input v-model="form.physicalNum" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物流状态">
              <template slot-scope="scope">
                <el-tag v-if="form.status == 0">未运输</el-tag>
                <el-tag v-if="form.status == 1">运输中</el-tag>
                <el-tag v-if="form.status == 2">运输完成</el-tag>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="批次">
              <el-input v-model="form.batchNum" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开始时间">
              <el-input v-model="form.startTime" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间">
              <el-input v-model="form.endTime" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出发地">
              <el-input v-model="form.startName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="终止地">
              <el-input v-model="form.endName" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {listByuser, updateById, updateloadById} from "@/api/system/physical";
export default {
  data(){
    return{
      physicalList:[],
      loading:true,
      open:false,
      form:{},
    }
  },
  methods:{
    getList(){
      listByuser().then(r=>{
        this.physicalList=r.data;
        this.loading=false;
      })
    },
    handleClick(val){
      this.form=val
      this.open=true
    },
    yunshu(physicalId){
      updateById(physicalId).then(()=>{
        this.getList()
      })
    },
    wancheng(physicalId){
      updateloadById(physicalId).then(()=>{
        this.getList()
      })
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped>

</style>
